<template>
  <el-card shadow="hover">
    <div>
      <el-form inline>
        <el-form-item>
          <el-date-picker
            v-model="search_time"
            type="monthrange"
            range-separator="至"
            start-placeholder="开始月份"
            end-placeholder="结束月份"
            :picker-options="pickerOptions"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary">查询</el-button>
        </el-form-item>
      </el-form>

      <el-divider />

      <el-form inline class="d2-text-center">
        <el-form-item label="选用量占率" class="d2-font-weight">
          <el-select v-model="order">
            <el-option v-for="item in option_list" :key="item.value" :value="item.value" :label="item.label" />
          </el-select>
        </el-form-item>
      </el-form>
      <ve-histogram :data="chartData" :settings="chartSettings" :legend="legend" :grid="grid" />

      <el-divider />

      <el-row :gutter="20">
        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
          <ve-pie :data="pieChartData" :legend="legend" :grid="grid" />
        </el-col>
        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
          <ve-pie :data="pieChartData" :legend="legend" :grid="grid" />
        </el-col>
      </el-row>

    </div>
  </el-card>
</template>

<script>
import VeHistogram from 'v-charts/lib/histogram.common'
import VeLine from 'v-charts/lib/line.common'
import Pie from 'v-charts/lib/pie.common'
export default {
  name: 'SchoolDataCharts',
  components: {
    [VeHistogram.name]: VeHistogram,
    [VeLine.name]: VeLine,
    [Pie.name]: Pie
  },
  data() {
    return {
      option_list: [
        { value: 1, label: '选用量从高到底' },
        { value: 2, label: '教材规模从高到底' },
        { value: 3, label: '教材选用量从高到底' }
      ],
      pickerOptions: {
        shortcuts: [{
          text: '近一月',
          onClick(picker) {
            const start = new Date()
            const end = new Date()
            start.setMonth(start.getMonth() - 1)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '近三月',
          onClick(picker) {
            const start = new Date()
            const end = new Date()
            start.setMonth(start.getMonth() - 3)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '近一年',
          onClick(picker) {
            const start = new Date()
            const end = new Date()
            start.setMonth(start.getMonth() - 12)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      legend: {
        bottom: 0
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '6%',
        containLabel: true
      },
      chartSettings: {
        showLine: ['下单用户']
      },
      chartData: {
        columns: ['日期', '访问用户', '下单用户'],
        rows: [
          { '日期': '1/1', '访问用户': 1393, '下单用户': 1093 },
          { '日期': '1/2', '访问用户': 3530, '下单用户': 3230 },
          { '日期': '1/3', '访问用户': 2923, '下单用户': 2623 },
          { '日期': '1/4', '访问用户': 1723, '下单用户': 1423 },
          { '日期': '1/5', '访问用户': 3792, '下单用户': 3492 },
          { '日期': '1/6', '访问用户': 4593, '下单用户': 4293 }
        ]
      },
      pieChartData: {
        columns: ['日期', '访问用户'],
        rows: [
          { '日期': '1/1', '访问用户': 1393 },
          { '日期': '1/2', '访问用户': 3530 },
          { '日期': '1/3', '访问用户': 2923 },
          { '日期': '1/4', '访问用户': 1723 },
          { '日期': '1/5', '访问用户': 3792 },
          { '日期': '1/6', '访问用户': 4593 }
        ]
      },
      search_time: '',
      order: ''
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
